<template>
  <div :style="{ textAlign: record?.align || 'center', width: '100%' }">
    <Image :src="img" v-if="img" />
    <span v-else>{{ record?.label }}</span>
  </div>
</template>
<script lang="ts">
  import { defineComponent, computed } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { Image } from 'ant-design-vue';
  export default defineComponent({
    components: { Image },
    props: {
      modelValue: {
        type: String,
        default: '',
      },
      record: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props, { attrs }) {
      const userStore = useUserStore();
      const serverInfo = userStore.getServerInfo;
      console.log('defineComponent', { props, attrs });
      const img = computed(() => {
        let _img = props.record['img'];
        if (_img) {
          return `${
            _img.startsWith('/') ? serverInfo.rootPath + _img : serverInfo.rootPath + '/' + _img
          }`;
        }
        return '';
      });
      return {
        img,
      };
    },
  });
</script>
